<template>
  <div class="the_my_editor_container">
    <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>
    <el-upload class="upload-demo" :on-error="uploadError" action="http://upload.qiniup.com" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess'
               ref="upload" style="display:none">
      <el-button size="small" type="primary" ref="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
    </el-upload>
  </div>
</template>
<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {quillEditor} from 'vue-quill-editor'
//  import editor from '../common/editor.vue'
  import {getUpToken} from '../../services/apis/baseService'
  import config from '../../config'

//  const STATVIDEO = 'http://otq0t8ph7.bkt.clouddn.com/'

  export default {
    data () {
      return {
        content: '', // 文章内容
        editorOption: {
          placeholder: '请输入内容'
        },
        addRange: [],
        uploadData: {},
        photoUrl: '', // 上传图片地址
        uploadType: '', // 上传的文件类型（图片、视频）
        fullscreenLoading: false
      }
    },
    methods: {
      // 图片上传之前调取的函数
      beforeUpload (file) {
        return this.qnUpload(file)
      },
      // 图片上传前获得数据token数据
      qnUpload (file) {
        this.fullscreenLoading = true
        const suffix = file.name.split('.')
        const ext = suffix.splice(suffix.length - 1, 1)[0]
        if (this.uploadType === 'image') { // 如果是点击插入图片
          // TODO 图片格式/大小限制
          return getUpToken().then(res => {
            this.uploadData = {
              key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
              token: res.data.token
            }
          })
        } else if (this.uploadType === 'video') { // 如果是点击插入视频
          this.$message({
            message: '暂不支持视频上传',
            type: 'warning'
          })
//          return this.$http('common/get_qiniu_token').then(res => {
//            this.uploadData = {
//              key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
//              token: res
//            }
//          })
        }
      },
      // 图片上传成功回调   插入到编辑器中
      upScuccess (e, file, fileList) {
        this.fullscreenLoading = false
        let vm = this
        let url = ''
        if (this.uploadType === 'image') { // 获得文件上传后的URL地址
//          url = STATICDOMAIN + e.key
          url = config.QiNiuUrl + e.key
        }
//        else if (this.uploadType === 'video') {
//          url = STATVIDEO + e.key
//        }
        if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中
          let value = url
          // API: https://segmentfault.com/q/1010000008951906
          // this.$refs.myTextEditor.quillEditor.getSelection();
          // 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入图片即可。
          vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
          value = value.indexOf('http') !== -1 ? value : 'http:' + value
          vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, 'user') // 调用编辑器的 insertEmbed 方法，插入URL
        } else {
          this.$message.error(`${vm.uploadType}插入失败`)
        }
        this.$refs['upload'].clearFiles() // 插入成功后清除input的内容
      },
      // 图片上传失败
      uploadError () {
        console.log('error')
        // loading动画消失
        this.fullscreenLoading = false
        this.$message.error('图片插入失败')
      },
      // 点击图片ICON触发事件
      imgHandler (state) {
        this.addRange = this.$refs.myQuillEditor.quill.getSelection()
        if (state) {
          let fileInput = this.$refs.imgInput
//          let fileInput = document.getElementById('imgInput')
//          fileInput.click() // 加一个触发事件
          fileInput.$el.click()
        }
        this.uploadType = 'image'
      },
      // 点击视频ICON触发事件
      videoHandler (state) {
        this.$message({
          message: '暂不支持视频上传',
          type: 'warning'
        })
//        this.addRange = this.$refs.myQuillEditor.quill.getSelection()
//        if (state) {
//          let fileInput = document.getElementById('imgInput')
//          fileInput.click() // 加一个触发事件
//        }
//        this.uploadType = 'video'
      }
    },
    mounted () {
      // 为图片ICON绑定事件  getModule 为编辑器的内部属性
      this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
      this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 为视频ICON绑定事件
    },
    components: {
      quillEditor
//      editor
    }
  }
</script>
<style lang="stylus">
  /*.quill-editor*/
    /*min-height: 100px*/
    /*.ql-container*/
      /*min-height: 100px*/

  .ql-snow .ql-editor img
    max-width: 480px

  .ql-editor .ql-video
    max-width: 480px
</style>
